<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CodeMirror Demo</title>
  <link href="lib/codemirror.css" rel="stylesheet" type="text/css" >
  <link href="addon/scroll/simplescrollbars.css" rel="stylesheet" type="text/css" >
  <link href="addon/display/fullscreen.css" rel="stylesheet" type="text/css" >
  <link href="addon/fold/foldgutter.css" rel="stylesheet" type="text/css" >

  <link rel="stylesheet" href="theme/cobalt.css">
  <link rel="stylesheet" href="theme/dracula.css">
  <link rel="stylesheet" href="theme/eclipse.css">
  <link rel="stylesheet" href="theme/erlang-dark.css">
  <link rel="stylesheet" href="theme/mbo.css">
  <link rel="stylesheet" href="theme/rubyblue.css">
  <link rel="stylesheet" href="theme/the-matrix.css">
  <link rel="stylesheet" href="theme/tomorrow-night-eighties.css">
  <link rel="stylesheet" href="theme/vibrant-ink.css">
  <link rel="stylesheet" href="theme/xq-dark.css">

  <script src="lib/codemirror.js"></script>
  
  <script src="addon/selection/active-line.js" type="text/javascript"></script>
  <script src="addon/fold/xml-fold.js" type="text/javascript"></script>
  <script src="addon/edit/closebrackets.js" type="text/javascript"></script>
  <script src="addon/edit/closetag.js" type="text/javascript"></script>
  <script src="addon/edit/matchtags.js" type="text/javascript"></script>
  <script src="addon/edit/matchbrackets.js" type="text/javascript"></script>

  <script src="mode/xml/xml.js" type="text/javascript"></script>
  <script src="mode/css/css.js" type="text/javascript"></script>
  <script src="mode/htmlmixed/htmlmixed.js" type="text/javascript"></script>
  <script src="mode/javascript/javascript.js" type="text/javascript"></script>
  <script src="addon/scroll/simplescrollbars.js" type="text/javascript"></script>
  <script src="addon/display/fullscreen.js" type="text/javascript"></script>
  <script src="addon/display/placeholder.js" type="text/javascript"></script>
  <script src="addon/comment/continuecomment.js" type="text/javascript"></script>
  <script src="addon/comment/comment.js" type="text/javascript"></script>

  <!--代码折叠-->
  <script src="addon/fold/foldcode.js" type="text/javascript"></script>
  <script src="addon/fold/foldgutter.js" type="text/javascript"></script>
  <script src="addon/fold/brace-fold.js" type="text/javascript"></script>

  <style type="text/css">
     /** .cm-matchhighlight {background-color: grey}  lightgreen grey **/
    .CodeMirror{height: 500px;}
    .CodeMirror pre.CodeMirror-placeholder { color: #999; }
    *{
      font-family: consolas,"courier new",monospace;
      font-size:14px;
    }
    #content{
      border:1px solid lightgreen;
      width: 600px;
    }
  </style>
 </head>
 <body style="padding: 30px;">
  <div id="content">
   <form>
    <textarea id="code" name="code" placeholder="在这里编写代码">
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <script type="text/javascript">
      /**注释**/
      function a(){
        alert(docuemt.getElementById("test"));
      }
    </script>
    <style>
          h1 {
          text-align: center;
          }
    </style>
  </head>
  <body>
    <h1>
          Hello World!
    </h1>
    <p>
          This is a test page
    </p>
  </body>
</html>
</textarea>
   </form>
   </div>
选择主题
   <select onchange="selectTheme()" id=select>
      <option selected>default</option>
      <option>cobalt</option>
      <option>dracula</option>
      <option>eclipse</option>
      <option>erlang-dark</option>
      <option>mbo</option>
      <option>rubyblue</option>
      <option>the-matrix</option>
      <option>tomorrow-night-eighties</option>
      <option>vibrant-ink</option>
      <option>xq-dark</option>
  </select>

 </body>
 <script>
   var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
       //value: "function myScript(){return 100;}\n",
       //value : "http://www.cnblogs.com/oldphper",   // 文本域默认显示的文本
       lineNumbers: true,         // 是否显示行号
       mode: 'text/html',         // 模式
          smartIndent : true,         // 是否智能缩进
          styleActiveLine: true,        // 激活当前行样式
          indentUnit : 2,               // 缩进单位，默认2
          tabSize : 4,              // Tab缩进，默认4
          readOnly : false,          // 是否只读，默认false
          matchBrackets: true,          // 匹配符号
          matchTags: {bothTags: true},  // 匹配标签 按住Ctrl+J 可以定位标签位置
          autoCloseTags: true,          // 自动关闭标签 addon/edit/
          autoCloseBrackets: true,     // 自动输入括弧  addon/edit/
          scrollbarStyle: "simple",     // 简易滚动条 addon/scroll
          continueComments: "Enter",    // 注释代码 快捷键 Ctrl-Q
          //  lineWrapping: true,
          foldGutter: true,              // 允许在行号位置折叠
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
    
          // 代码全屏按键，addon/dispaly/ 可以使用组合键
          extraKeys: {
            "Ctrl-J": "toMatchingTag",
            "Ctrl-Q": "toggleComment",  
            "F11": function(cm) {
              cm.setOption("fullScreen", !cm.getOption("fullScreen"));
            },
            "Esc": function(cm) {
              if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
            }
            /*,"Ctrl-Q": function(cm){
              cm.foldCode(cm.getCursor());  // 快捷键折叠代码
            }*/
          }
     });

    /** 切换主题 S **/
    var s_theme = document.getElementById("select");
    function selectTheme() {
      var theme = s_theme.options[s_theme.selectedIndex].textContent;
      editor.setOption("theme", theme);
      location.hash = "#" + theme;
    }
    var choice = (location.hash && location.hash.slice(1)) ||
                 (document.location.search && decodeURIComponent(document.location.search.slice(1)));
    if (choice) {
      s_theme.value = choice;
      editor.setOption("theme", choice);
    }
    CodeMirror.on(window, "hashchange", function() {
      var theme = location.hash.slice(1);
      if (theme) { s_theme.value = theme; selectTheme(); }
    });
    /** 切换主题 E **/
    // function fun() {
    //   ob = "";
      //alert(editor.getValue()); // 得到所有内容
      //editor.setValue("abc"); // 将编辑器内容改为"abc"
       
      // 0为起点，2行第3个字母到2行第5个字母
      //alert(editor.getRange({line:1,ch:2},{line:1,ch:5}));  //得到
      //editor.replaceRange("shashasha",{line:1,ch:2},{line:2,ch:5});
       
      //alert(editor.getLine(2));   // 第三行数据
      //alert(editor.lineCount());   // 总共几行
      //alert(editor.firstLine());   // 首行数0
      //alert(editor.lastLine());   // 末行数19，共20行
      //ob = editor.getLineHandle(1);   // 第二行数据句柄
      //alert(editor.getLineNumber(ob)); // 行句柄在哪行
      //editor.eachLine(0,2,alert(ob));
       
      //ob = editor.changeGeneration();    // 编辑动作次数，1次起
      //editor.markClean();   // 清除动作
      //editor.isClearn();    // 是否清除
       
      //ob = editor.getSelection();   // 获得选中的数据一条
      //ob = editor.getSelections();  // 获得选中数据多条
      //editor.replaceSelection("ttttttt"); // 选中替换，一条根多条都替换，不选中则在光标处插入
      //editor.replaceSelections(["aaa","bbb"]); // 选中替换，多条对多选
      //editor.setSelection();  //设置选中
      //editor.setSelections();  //设置选中
      //ob = editor.listSelections(); //boj
      //ob = editor.somethingSelected(); // 是否有选中
      //editor.addSelection({line:2,ch:6}, {line:1,ch:2});  // 选中此段
       
      //ob = editor.getCursor();    // ob['line']、['ch']
      //editor.setCursor(2);    // 设置光标位置
       
      //ob = editor.hasFocus();   // focus?全false
       
      //editor.addOverlay("aaaaa"); //..
      //editor.removeOverlay("aaaaa"); //..
       
      //ob = editor.getDoc();   // 文档对象,很多
      //ob = editor.getEditor();   //..
       
      //ob = editor.setBookmark({line:1,ch:3}); // 书签对象
       
      //editor.addWidget({line:1,ch:2},"<if></if>",true); //添加部件
       
      //editor.setSize(1100,1100);    //设置宽高
      //editor.scrollTo(800,300); // 设置滚动条位置
       
      //editor.cursorCoords({line:1,ch:2},"aaaaaa"); //..
       
      //for (var i in ob)
      //    alert(i);
      //alert(ob);
// }

  </script>
</html>